<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
 <head>
  <title>CSS inline background policy: each-box, animated position test</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/inline/policy/each-box/004.html"/>
    <style type="text/css">
   #test {
     background: url(/resources/images/bullet) no-repeat;
     -moz-background-inline-policy: each-box;
     background-position: 0% 0%;
     border: solid;
   }
   p {
     width: 50%; margin: 2em 10%;
   }
   #a { float: left; padding: 2em; }
  </style>
  <script type="text/javascript">
    var position = 0; /* 0 .. 2*PI */
    var x1 = 1; var bias1 = 1;
    var x2 = 1; var bias2 = 1;
    var x3 = 1; var bias3 = 1;
    var count = 0;
    function test() {
      count++;
      if (count % 180 == 0) { bias1 = bias1 < 0 ? 1 : -1; }
      if (count % 35 == 0) { bias2 = bias2 < 0 ? 1 : -1; }
      if (count % 50 == 0) { bias3 = bias3 < 0 ? 1 : -1; }
      x1 += 0.04 * bias1;
      document.getElementById('before').style.letterSpacing = x1 + 'px';
      document.getElementById('test').style.letterSpacing = x1 + 'px';
      x2 += 0.04 * bias2;
      document.getElementById('b').style.lineHeight = x2;
      x3 += 0.20 * bias3;
      document.getElementById('a').style.width = x3 * 1.2 + 6 + 'em';
      document.getElementById('a').style.height = x3 + 3 + 'em';
      with (Math) {
        position += PI / 200;
        if (position >= 2 * PI) {
          position = 0;
        }
        document.styleSheets[0].cssRules[0].style.backgroundPosition = (sin(position) + 1) * 50 + '% 0%';
        document.getElementById('status').firstChild.data = document.styleSheets[0].cssRules[0].style.backgroundPosition;
      }
    }
  </script>
 </head>
 <body onload="var query = location.search; if (query) { query = query.substring(1, query.length); } else { query = 10 } setInterval(test, query)">
  <p> The diamond should bounce across each line.  Position: <span id="status">0% 0%</span> </p>
  <p id="b"> <span id="before"> filler text filler text </span> <span id="test">
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   <span id="a"> </span>
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text filler
   text filler text filler text filler text filler text filler text
   filler text filler text filler text filler text filler text </span>
  </p>
 </body>
</html>
